<!--
 * @Author: your name
 * @Date: 2021-04-14 22:38:41
 * @LastEditTime: 2021-05-30 21:51:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\projects\xmly\src\app\pages\albums\albums.component.html
-->
<div class="main-content">
    <div class="categories">
        <ul>
            <li (click)="changeSubCateory()" [class.checked]="searchParams.subcategory == ''">全部</li>
            <li [class.checked]="item.code == searchParams.subcategory" (click)="changeSubCateory(item)"
                *ngFor="let item of categoryInfo?.subcategories;trackBy:trackBySubCategory">{{item.displayValue}}</li>
        </ul>
    </div>
    <div class="conditions">
        <ng-container *ngFor="let row of categoryInfo?.metadata;trackBy:trackByMetas">
            <div class="row" *ngIf="showMetaRow(row.name)">
                <b class="title">{{row.name}}</b>
                <ul class="tabs">
                    <li (click)="changeMeta(row, item)" class="tag" *ngFor="let item of row.metaValues">
                        {{item.displayName}}
                    </li>
                </ul>
            </div>
        </ng-container>

        <div class="row checked-conditions" *ngIf="checkedMetas.length">
            <b class="title">已筛选</b>
            <ul class="tabs">
                <li class="tag" *ngFor="let item of checkedMetas">
                    <span class="label-title">{{item.metaRowName}}</span>
                    <app-tag [xmClosable]="true" (closed)="unCheckMeat(item)">{{item.metaName}}</app-tag>
                </li>
            </ul>
            <a class="clear" (click)="unCheckMeat('clear')">清除全部</a>
        </div>
    </div>
    <div class="albums">
        <div class="album-head">
            <div class="title">
                <b>{{ albumsInfo?.pageConfig.h1title }}</b>
            </div>
            <ul class="sort">
                <li [class.checked]="i === searchParams.sort" *ngFor="let item of sorts; index as i"
                    (click)="changeSort(i)">
                    {{item}}
                </li>
            </ul>
        </div>
        <div class="album-cards">
            <div class="album-card" [routerLink]="'/album/' + album.albumId" *ngFor="let album of albumsInfo?.albums;">
                <div class="cover">
                    <!--    图片地址加上!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290，尺寸就会变为140 * 140      -->
                    <img class="thumbnail"
                        [appImgLazy]="album.coverPath + '!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290'"
                        [alt]="[album.title]"> 
                    <img class="icon-play" (click)="playAlbum($event, album.albumId)"
                        src="../../../assets/images/icon-play-cover.png" />
                    <p class="listen-count">
                        <i class="icon iconfont icon-headset"></i>
                        <!-- <i appIcon='headset' class="icon"></i> -->
                        <span>{{ album.playCount | numberFormat }}</span>
                    </p>
                </div>
                <div class="abstract">
                    <p class="txt title ellipsis">
                        <app-tag *ngIf="album.isFinished === 2" [xmColor]="'green'" class="tag">完本</app-tag>
                        <span>{{ album.title }}</span>
                    </p>
                    <p class="txt author"><span>{{ album.anchorName }}</span></p>
                </div>
            </div>
        </div>
        <div class="page-wrap">
            <app-pagination class="page" [pageNum]="searchParams.page" [pageSize]="searchParams.perPage" [total]="total"
                (changed)="changePage($event)"></app-pagination>
        </div>
    </div>
</div>